<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            overflow: auto;
            width: 50%;
        }

        #box>div {

            width: 500px;
            height: 40px;
            /* background-color: aquamarine; */
            border-bottom: 2px solid rgb(180, 179, 179);
            margin-left: 40px;
        }



        body .boxclass {
            position: fixed;
            top: 300px;
            left: 800px;
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* border: 8px solid #cccccc; */
            border-radius: 50%;

        }



        #myCanvas {

            border-radius: 50%;

        }

        .yuan {
            width: 90px;
            height: 90px;
            background-color: rgb(93, 172, 246);
            border-radius: 50%;
            position: absolute;
            top: 5px;
            left: 5px;
        }
    </style>
</head>

<body>
    <div class="boxclass">
        <div class="yuan"></div>
        <canvas id="myCanvas" width="100" height="100">

    </div>
    <div id="box">
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>黄金时代</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>黄金时代</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>黄金时代</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>黄金时代</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>黄金时代</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
        <div>复仇者联盟</div>
        <div>你好忧愁</div>
        <div>斯巴达三百勇士</div>
    </div>

</body>
<script>
    window.onload = function () {
        // 【01】获取标签
        var Canvas = document.getElementById("myCanvas");
        var oYuan = document.getElementsByClassName("yuan")[0];
        var ctx = Canvas.getContext("2d"); // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

        // 【02】获取鼠标滚轮的位置事件
        window.onscroll = function () {
            ctx.clearRect(0, 0, 100, 100);
            let lenY = window.scrollY;
            let num = document.body.scrollHeight - window
            .innerHeight; // scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）
            let r = Math.floor(Canvas.width / 2);
            let startAngle = -0.5 * Math.PI + lenY / num * 2 * Math.PI;

            // 【03】开始制作圆弧

            ctx.beginPath(); // 起始一条路径
            ctx.arc(50, 50, r, startAngle, -0.5 * Math.PI,
            true); // 画圆是使用arc(x, y, r, startAngle, endAngle, true)这个方法的
            ctx.strokeStyle = "red";
            ctx.lineWidth = 10;
            ctx.stroke(); // 绘制已定义好的路径

        }
        // 【04】制作回到顶端的点击事件
        oYuan.onclick = function () {
            window.scrollTo(0, 0);
            ctx.clearRect(0, 0, 100, 100);
        }

    }
</script>

</html>